//页面加载完毕后执行
window.onload = function() {
    var objDemo = document.getElementById("demo");
    var objSmallBox = document.getElementById("small-box");
    var objMark = document.getElementById("mark");
    var objFloatBox = document.getElementById("float-box");
    var objBigBox = document.getElementById("big-box");
    var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
    objMark.onmouseover = function() {
        objFloatBox.style.display = "block"
        objBigBox.style.display = "block"
    }
    objMark.onmouseout = function() {
        objFloatBox.style.display = "none"
        objBigBox.style.display = "none"

    }
    objMark.onmousemove = function(ev) {

        var _event = ev || window.event; //兼容多个浏览器的event参数模式

        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
        //设置边界处理，防止移出小图片
        if (left < 0) {
            left = 0;

        } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
            left = objMark.offsetWidth - objFloatBox.offsetWidth;
        }
        if (top < 0) {
            top = 0;
        } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
            top = objMark.offsetHeight - objFloatBox.offsetHeight;
        }
        objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
        objFloatBox.style.top = top + "px";
        //求其比值
        var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
        //方向相反，小图片鼠标移动方向与大图片相反，故而是负值
        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
    var plus = document.querySelector('.plus')
    var minus = document.querySelector('.minus')
    var numbr = document.querySelector('#numbr')
    plus.onclick = function() {
        numbr.value = Number(numbr.value) + 1
    }
    minus.onclick = function() {
        numbr.value = Number(numbr.value) - 1
        if (numbr.value <= 1) {
            numbr.value = 1
        }
    }
    var show_more = document.querySelectorAll(".show-more")
    var hide_more = document.querySelectorAll('.hide-more')

    for (var i = 0; i < show_more.length; i++) {
        show_more[i].onclick = function() {
            this.previousElementSibling.style = "height:auto"
            this.style = "display:none"
            this.nextElementSibling.style = "display:block"
        }
        hide_more[i].onclick = function() {
            hide_more[0].parentNode.children[0].style = "height:168px"
            hide_more[1].parentNode.children[0].style = "height:168px"
            this.style = "display:none"
            this.parentNode.children[1].style = "display:block"
        }
    }
    var b = document.querySelector('.right-nav')
    var one_all = document.querySelector('.one-all')
    var two_all = document.querySelector('.two-all')
    window.onscroll = function() {
        if (document.documentElement.scrollTop >= 655) {
            b.style = "display:block"

        } else {
            b.style = "display:none"

        }
        if (document.documentElement.scrollTop >= 156) {
            two_all.classList.add('nave')
            document.querySelector('.two-list').classList.add('nave-two')
            document.querySelector('.cube-bottom').style = "display:none"
            document.querySelector('.shop').style = "display:none"
            document.querySelector('#ipt1').style = "width:613px"

        } else {
            two_all.classList.remove('nave')
            document.querySelector('.two-list').classList.remove('nave-two')
            document.querySelector('.cube-bottom').style = "display:flex"
            document.querySelector('.shop').style = "display:flex"
            document.querySelector('#ipt1').style = "width:435px"
        }
        b.onclick = function() {
            document.documentElement.scrollTop = 0
        }

    }
    var list = document.querySelector('.allshop')
    var ol = document.querySelector('.four-all')
    console.log(list)

    list.onmousemove = function() {
        ol.style = "display:block"
    }
    list.onmouseout = function() {
        ol.style = "display:none"
    }
    ol.onmousemove = function() {
        ol.style = "display:block"
    }
    ol.onmouseout = function() {
        ol.style = "display:none"
    }
    var zc = document.querySelector('.zc')
    zc.onclick = () => {
        window.location.href = "login2.html"
    }
    var photo = document.querySelector('.photo1')
    console.log(photo)
    photo.onclick = function() {
        window.location.href = "frist-page.html";
    }

}